<template>
  <div class="module-card">
    <div class="module-header">
      <h3>个人中心</h3>
      <div class="header-actions">
        <button 
          v-if="!isEditing"
          @click="startEditing"
          class="btn-primary"
        >
          <i class="icon-edit"></i> 编辑信息
        </button>
        <div v-else class="editing-actions">
          <button 
            @click="saveUserInfo"
            :disabled="saving"
            class="btn-primary"
          >
            {{ saving ? '保存中...' : '保存' }}
          </button>
          <button 
            @click="cancelEditing"
            class="btn-secondary"
          >
            取消
          </button>
        </div>
      </div>
    </div>
    
    <!-- 个人信息展示/编辑 -->
    <div class="personal-info-container">
      <!-- 基本信息 -->
      <div class="info-section">
        <h4>基本信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <label>姓名</label>
            <div v-if="!isEditing">{{ userInfo.name || '未设置' }}</div>
            <input 
              v-else
              type="text"
              v-model="formData.name"
              class="form-input"
              :class="{ 'error': errors.name }"
              placeholder="请输入姓名"
            />
            <div v-if="errors.name" class="error-message">{{ errors.name }}</div>
          </div>
          
          <div class="info-item">
            <label>学号</label>
            <div v-if="!isEditing">{{ userInfo.studentId || '未设置' }}</div>
            <input 
              v-else
              type="text"
              v-model="formData.studentId"
              class="form-input"
              :class="{ 'error': errors.studentId }"
              placeholder="请输入学号"
            />
            <div v-if="errors.studentId" class="error-message">{{ errors.studentId }}</div>
          </div>
          
          <div class="info-item">
            <label>性别</label>
            <div v-if="!isEditing">{{ userInfo.gender === 'male' ? '男' : userInfo.gender === 'female' ? '女' : '未设置' }}</div>
            <select 
              v-else
              v-model="formData.gender"
              class="form-select"
            >
              <option value="">请选择性别</option>
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </div>
          
          <div class="info-item">
            <label>学院</label>
            <div v-if="!isEditing">{{ userInfo.college || '未设置' }}</div>
            <input 
              v-else
              type="text"
              v-model="formData.college"
              class="form-input"
              placeholder="请输入学院"
            />
          </div>
          
          <div class="info-item">
            <label>专业</label>
            <div v-if="!isEditing">{{ userInfo.major || '未设置' }}</div>
            <input 
              v-else
              type="text"
              v-model="formData.major"
              class="form-input"
              placeholder="请输入专业"
            />
          </div>
          
          <div class="info-item">
            <label>年级</label>
            <div v-if="!isEditing">{{ userInfo.grade || '未设置' }}</div>
            <input 
              v-else
              type="text"
              v-model="formData.grade"
              class="form-input"
              placeholder="请输入年级"
            />
          </div>
          
          <div class="info-item">
            <label>手机号</label>
            <div v-if="!isEditing">{{ userInfo.phoneNumber || '未设置' }}</div>
            <input 
              v-else
              type="tel"
              v-model="formData.phoneNumber"
              class="form-input"
              :class="{ 'error': errors.phoneNumber }"
              placeholder="请输入手机号"
            />
            <div v-if="errors.phoneNumber" class="error-message">{{ errors.phoneNumber }}</div>
          </div>
          
          <div class="info-item">
            <label>邮箱</label>
            <div v-if="!isEditing">{{ userInfo.email || '未设置' }}</div>
            <input 
              v-else
              type="email"
              v-model="formData.email"
              class="form-input"
              :class="{ 'error': errors.email }"
              placeholder="请输入邮箱"
            />
            <div v-if="errors.email" class="error-message">{{ errors.email }}</div>
          </div>
        </div>
      </div>
      
      <!-- 部门信息 -->
      <div class="info-section">
        <h4>部门信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <label>部门</label>
            <div>{{ departmentName || '未设置' }}</div>
          </div>
          
          <div class="info-item">
            <label>职位</label>
            <div v-if="!isEditing">{{ userInfo.position || '未设置' }}</div>
            <input 
              v-else
              type="text"
              v-model="formData.position"
              class="form-input"
              placeholder="请输入职位"
            />
          </div>
          
          <div class="info-item">
            <label>入社时间</label>
            <div v-if="!isEditing">{{ formatDate(userInfo.joinDate) || '未设置' }}</div>
            <input 
              v-else
              type="date"
              v-model="formData.joinDate"
              class="form-input"
              :max="new Date().toISOString().split('T')[0]"
            />
          </div>
          
          <div class="info-item">
            <label>退出时间</label>
            <div v-if="!isEditing">{{ formatDate(userInfo.leaveDate) || '在职' }}</div>
            <input 
              v-else
              type="date"
              v-model="formData.leaveDate"
              class="form-input"
              :min="formData.joinDate"
            />
          </div>
        </div>
      </div>
      
      <!-- 个人简介 -->
      <div class="info-section">
        <h4>个人简介</h4>
        <div class="info-full-width">
          <div v-if="!isEditing" class="bio-content">
            {{ userInfo.bio || '暂无简介' }}
          </div>
          <textarea 
            v-else
            v-model="formData.bio"
            class="form-textarea"
            rows="6"
            placeholder="请输入个人简介..."
          ></textarea>
        </div>
      </div>
      
      <!-- 个人技能 -->
      <div class="info-section">
        <h4>个人技能</h4>
        <div class="info-full-width">
          <div v-if="!isEditing" class="skills-container">
            <span 
              v-for="skill in userInfo.skills || []"
              :key="skill.id"
              class="skill-tag"
            >
              {{ skill.name }} <span class="skill-level">({{ skill.level }})</span>
            </span>
            <div v-if="(userInfo.skills || []).length === 0">
              暂无技能标签
            </div>
          </div>
          <div v-else class="skills-editor">
            <div class="skill-input-group">
              <input 
                type="text"
                v-model="newSkillName"
                class="form-input"
                placeholder="技能名称"
              />
              <select v-model="newSkillLevel" class="form-select">
                <option value="初级">初级</option>
                <option value="中级">中级</option>
                <option value="高级">高级</option>
              </select>
              <button 
                @click="addSkill"
                :disabled="!newSkillName.trim()"
                class="btn-add-skill"
              >
                <i class="icon-plus"></i> 添加
              </button>
            </div>
            
            <div class="added-skills">
              <span 
                v-for="(skill, index) in formData.skills"
                :key="index"
                class="skill-tag"
              >
                {{ skill.name }} <span class="skill-level">({{ skill.level }})</span>
                <button 
                  @click="removeSkill(index)"
                  class="btn-remove-skill"
                >
                  <i class="icon-times"></i>
                </button>
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 个人经历 -->
      <div class="info-section">
        <h4>个人经历</h4>
        <div v-if="!isEditing" class="experiences-container">
          <div 
            v-for="experience in userInfo.experiences || []"
            :key="experience.id"
            class="experience-item"
          >
            <div class="experience-header">
              <span class="experience-title">{{ experience.title }}</span>
              <span class="experience-time">{{ formatDate(experience.startDate) }} - {{ formatDate(experience.endDate) || '至今' }}</span>
            </div>
            <div class="experience-content">{{ experience.content }}</div>
          </div>
          <div v-if="(userInfo.experiences || []).length === 0">
            暂无经历记录
          </div>
        </div>
        <div v-else class="experiences-editor">
          <div 
            v-for="(experience, index) in formData.experiences"
            :key="index"
            class="experience-form-item"
          >
            <div class="experience-form-header">
              <h5>经历 {{ index + 1 }}</h5>
              <button 
                @click="removeExperience(index)"
                class="btn-remove-experience"
                :disabled="formData.experiences.length <= 1"
              >
                <i class="icon-trash-o"></i> 删除
              </button>
            </div>
            
            <div class="info-grid experience-fields">
              <div class="info-item">
                <label>标题</label>
                <input 
                  type="text"
                  v-model="experience.title"
                  class="form-input"
                  placeholder="例如：担任班长"
                />
              </div>
              
              <div class="info-item">
                <label>开始日期</label>
                <input 
                  type="date"
                  v-model="experience.startDate"
                  class="form-input"
                />
              </div>
              
              <div class="info-item">
                <label>结束日期</label>
                <input 
                  type="date"
                  v-model="experience.endDate"
                  class="form-input"
                  :min="experience.startDate"
                />
              </div>
              
              <div class="info-item full-width">
                <label>详细描述</label>
                <textarea 
                  v-model="experience.content"
                  class="form-textarea"
                  rows="3"
                  placeholder="请详细描述这段经历..."
                ></textarea>
              </div>
            </div>
          </div>
          
          <button 
            @click="addExperience"
            class="btn-add-experience"
          >
            <i class="icon-plus"></i> 添加经历
          </button>
        </div>
      </div>
    </div>
    
    <!-- 头像上传 -->
    <div class="avatar-upload-section">
      <h4>头像设置</h4>
      <div class="avatar-upload-container">
        <div class="avatar-preview">
          <img 
            v-if="userAvatar"
            :src="userAvatar"
            alt="用户头像"
            class="avatar-image"
          />
          <div v-else class="avatar-placeholder">
            <i class="icon-user"></i>
          </div>
        </div>
        
        <div class="avatar-upload-controls">
          <button 
            v-if="!isEditing"
            @click="startEditing"
            class="btn-primary"
          >
            <i class="icon-camera"></i> 更换头像
          </button>
          <div v-else class="upload-input-group">
            <input 
              type="file"
              ref="avatarInput"
              accept="image/*"
              @change="handleAvatarChange"
              class="avatar-input"
            />
            <label for="avatarInput" class="btn-primary upload-label">
              <i class="icon-upload"></i> 选择图片
            </label>
            <span v-if="avatarFile" class="file-name">{{ avatarFile.name }}</span>
            <button 
              v-if="avatarFile"
              @click="removeAvatar"
              class="btn-remove-avatar"
            >
              <i class="icon-times"></i>
            </button>
          </div>
        </div>
        
        <div class="avatar-tips">
          <p>• 支持 JPG、PNG 格式的图片</p>
          <p>• 建议上传方形图片，大小不超过 2MB</p>
          <p>• 上传后需要等待审核通过才能生效</p>
        </div>
      </div>
    </div>
    
    <!-- 账号安全 -->
    <div class="info-section security-section">
      <h4>账号安全</h4>
      <div class="security-actions">
        <button 
          @click="changePassword"
          class="btn-secondary"
        >
          <i class="icon-lock"></i> 修改密码
        </button>
        <button 
          @click="bindPhone"
          class="btn-secondary"
        >
          <i class="icon-mobile"></i> 绑定手机
        </button>
        <button 
          @click="bindEmail"
          class="btn-secondary"
        >
          <i class="icon-envelope-o"></i> 绑定邮箱
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'

// 模拟获取当前用户ID（实际项目中应该从登录状态中获取）
const currentUserId = ref(1) // 这里应该是当前登录用户的ID

// 状态管理
const userInfo = ref({})
const userAvatar = ref('')
const departmentName = ref('办公室')
const isEditing = ref(false)
const saving = ref(false)
const errors = ref({})
const avatarFile = ref(null)

// 表单数据
const formData = reactive({
  name: '',
  studentId: '',
  gender: '',
  college: '',
  major: '',
  grade: '',
  phoneNumber: '',
  email: '',
  position: '',
  joinDate: '',
  leaveDate: '',
  bio: '',
  skills: [],
  experiences: []
})

// 技能编辑状态
const newSkillName = ref('')
const newSkillLevel = ref('初级')

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    // 获取基本用户信息
    const userResponse = await fetch(`http://localhost:8080/user/${currentUserId.value}`)
    const userResult = await userResponse.json()
    
    if (userResult.code === 200) {
      userInfo.value = userResult.data
      
      // 如果有部门ID，获取部门名称（这里我们已经知道是办公室，所以可以直接设置）
      departmentName.value = '办公室'
      
      // 获取用户扩展信息
      const userInfoResponse = await fetch(`http://localhost:8080/userInfo/user/${currentUserId.value}`)
      const userInfoResult = await userInfoResponse.json()
      
      if (userInfoResult.code === 200) {
        // 合并用户信息
        Object.assign(userInfo.value, userInfoResult.data)
        
        // 初始化表单数据
        initializeFormData()
      } else {
        console.error('获取用户扩展信息失败:', userInfoResult.message)
        showToast('获取用户扩展信息失败', 'error')
      }
      
      // 获取用户头像
      await fetchUserAvatar()
    } else {
      console.error('获取用户信息失败:', userResult.message)
      showToast('获取用户信息失败', 'error')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    showToast('无法连接到服务器，请稍后重试', 'error')
  }
}

// 获取用户头像
const fetchUserAvatar = async () => {
  try {
    // 实际项目中应该从接口获取头像URL
    // 这里使用模拟数据
    // const response = await fetch(`http://localhost:8080/user/${currentUserId.value}/avatar`)
    // const result = await response.json()
    // if (result.code === 200) {
    //   userAvatar.value = result.data.avatarUrl
    // }
    
    // 模拟头像数据
    userAvatar.value = '' // 初始为空
  } catch (error) {
    console.error('获取用户头像失败:', error)
  }
}

// 初始化表单数据
const initializeFormData = () => {
  formData.name = userInfo.value.name || ''
  formData.studentId = userInfo.value.studentId || ''
  formData.gender = userInfo.value.gender || ''
  formData.college = userInfo.value.college || ''
  formData.major = userInfo.value.major || ''
  formData.grade = userInfo.value.grade || ''
  formData.phoneNumber = userInfo.value.phoneNumber || ''
  formData.email = userInfo.value.email || ''
  formData.position = userInfo.value.position || ''
  formData.joinDate = userInfo.value.joinDate || ''
  formData.leaveDate = userInfo.value.leaveDate || ''
  formData.bio = userInfo.value.bio || ''
  formData.skills = userInfo.value.skills ? [...userInfo.value.skills] : []
  formData.experiences = userInfo.value.experiences ? [...userInfo.value.experiences] : [{ title: '', startDate: '', endDate: '', content: '' }]
}

// 开始编辑
const startEditing = () => {
  isEditing.value = true
  errors.value = {}
  avatarFile.value = null
}

// 取消编辑
const cancelEditing = () => {
  isEditing.value = false
  errors.value = {}
  avatarFile.value = null
  initializeFormData()
  if (avatarInput.value) {
    avatarInput.value.value = ''
  }
}

// 验证表单
const validateForm = () => {
  const newErrors = {}
  
  if (!formData.name.trim()) {
    newErrors.name = '请输入姓名'
  }
  
  if (!formData.studentId.trim()) {
    newErrors.studentId = '请输入学号'
  }
  
  if (formData.phoneNumber && !/^1[3-9]\d{9}$/.test(formData.phoneNumber)) {
    newErrors.phoneNumber = '请输入有效的手机号码'
  }
  
  if (formData.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(formData.email)) {
    newErrors.email = '请输入有效的邮箱地址'
  }
  
  errors.value = newErrors
  return Object.keys(newErrors).length === 0
}

// 保存用户信息
const saveUserInfo = async () => {
  if (!validateForm()) {
    return
  }
  
  saving.value = true
  try {
    // 准备保存的数据
    const saveData = {
      ...formData,
      userId: currentUserId.value,
      departmentId: 5 // 办公室部门ID
    }
    
    // 保存基本用户信息
    const userResponse = await fetch(`http://localhost:8080/user/update/${currentUserId.value}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: formData.name,
        studentId: formData.studentId,
        gender: formData.gender,
        phoneNumber: formData.phoneNumber,
        email: formData.email,
        departmentId: 5
      })
    })
    
    const userResult = await userResponse.json()
    
    if (userResult.code !== 200) {
      console.error('保存基本信息失败:', userResult.message)
      showToast('保存基本信息失败：' + userResult.message, 'error')
      return
    }
    
    // 保存用户扩展信息
    const userInfoResponse = await fetch(`http://localhost:8080/userInfo/update`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userId: currentUserId.value,
        college: formData.college,
        major: formData.major,
        grade: formData.grade,
        position: formData.position,
        joinDate: formData.joinDate,
        leaveDate: formData.leaveDate,
        bio: formData.bio,
        skills: formData.skills,
        experiences: formData.experiences
      })
    })
    
    const userInfoResult = await userInfoResponse.json()
    
    if (userInfoResult.code !== 200) {
      console.error('保存扩展信息失败:', userInfoResult.message)
      showToast('保存扩展信息失败：' + userInfoResult.message, 'error')
      return
    }
    
    // 如果有头像文件，上传头像
    if (avatarFile.value) {
      await uploadAvatar()
    }
    
    // 重新获取用户信息
    await fetchUserInfo()
    
    isEditing.value = false
    saving.value = false
    showToast('个人信息更新成功', 'success')
  } catch (error) {
    console.error('保存用户信息失败:', error)
    showToast('无法连接到服务器，请稍后重试', 'error')
    saving.value = false
  }
}

// 处理头像选择
const handleAvatarChange = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 检查文件大小（不超过2MB）
    if (file.size > 2 * 1024 * 1024) {
      showToast('图片大小不能超过2MB', 'error')
      return
    }
    
    // 检查文件类型
    if (!file.type.match('image/jpeg') && !file.type.match('image/png')) {
      showToast('只支持JPG和PNG格式的图片', 'error')
      return
    }
    
    avatarFile.value = file
    
    // 预览图片
    const reader = new FileReader()
    reader.onload = (e) => {
      userAvatar.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 上传头像
const uploadAvatar = async () => {
  try {
    const formData = new FormData()
    formData.append('avatar', avatarFile.value)
    formData.append('userId', currentUserId.value)
    
    const response = await fetch(`http://localhost:8080/user/${currentUserId.value}/avatar`, {
      method: 'POST',
      body: formData
    })
    
    const result = await response.json()
    
    if (result.code !== 200) {
      console.error('上传头像失败:', result.message)
      showToast('上传头像失败：' + result.message, 'error')
    } else {
      showToast('头像上传成功，等待审核', 'success')
    }
  } catch (error) {
    console.error('上传头像失败:', error)
    showToast('无法连接到服务器，请稍后重试', 'error')
  }
}

// 移除头像
const removeAvatar = () => {
  avatarFile.value = null
  fetchUserAvatar() // 恢复原始头像
  if (avatarInput.value) {
    avatarInput.value.value = ''
  }
}

// 添加技能
const addSkill = () => {
  if (!newSkillName.value.trim()) {
    return
  }
  
  formData.skills.push({
    name: newSkillName.value.trim(),
    level: newSkillLevel.value
  })
  
  newSkillName.value = ''
  newSkillLevel.value = '初级'
}

// 移除技能
const removeSkill = (index) => {
  formData.skills.splice(index, 1)
}

// 添加经历
const addExperience = () => {
  formData.experiences.push({
    title: '',
    startDate: '',
    endDate: '',
    content: ''
  })
}

// 移除经历
const removeExperience = (index) => {
  if (formData.experiences.length > 1) {
    formData.experiences.splice(index, 1)
  } else {
    showToast('至少保留一条经历', 'warning')
  }
}

// 修改密码
const changePassword = () => {
  showToast('修改密码功能尚未实现', 'info')
}

// 绑定手机
const bindPhone = () => {
  showToast('绑定手机功能尚未实现', 'info')
}

// 绑定邮箱
const bindEmail = () => {
  showToast('绑定邮箱功能尚未实现', 'info')
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`
}

// 补零
const padZero = (num) => {
  return num.toString().padStart(2, '0')
}

// 显示提示信息
const showToast = (message, type = 'info') => {
  // 这里可以根据实际项目中的toast组件来实现
  alert(message)
}

// 组件挂载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})
</script>

<style>
/* 全局模块容器样式 */
.module-card {
  width: 100%;
  max-width: 1400px;
  margin: 24px auto;
  padding: 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #f0f0f0;
}

.module-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.editing-actions {
  display: flex;
  gap: 8px;
}

/* 按钮样式 */
.btn-primary {
  background: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover:not(:disabled) {
  background: #66b1ff;
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: #e0e0e0;
  color: #333;
}

/* 个人信息容器 */
.personal-info-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

/* 信息区块 */
.info-section {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
}

.info-section h4 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item label {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.info-item div {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* 表单元素 */
.form-input,
.form-select,
.form-textarea {
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: #f5222d;
}

.error-message {
  color: #f5222d;
  font-size: 12px;
  margin-top: 4px;
}

/* 个人简介 */
.info-full-width {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bio-content {
  background: white;
  padding: 16px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  white-space: pre-wrap;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* 技能部分 */
.skills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  background: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  color: #333;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.skill-level {
  color: #909399;
  font-size: 12px;
}

.skills-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skill-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.skill-input-group .form-input {
  flex: 2;
}

.skill-input-group .form-select {
  flex: 1;
}

.btn-add-skill {
  background: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-add-skill:hover:not(:disabled) {
  background: #66b1ff;
}

.btn-add-skill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.added-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-remove-skill {
  background: transparent;
  border: none;
  color: #909399;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-remove-skill:hover {
  background: #f0f0f0;
  color: #f5222d;
}

/* 经历部分 */
.experiences-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.experience-title {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.experience-time {
  color: #909399;
  font-size: 14px;
}

.experience-content {
  color: #666;
  line-height: 1.6;
  font-size: 14px;
}

.experiences-editor {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.experience-form-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.experience-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.experience-form-header h5 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.btn-remove-experience {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.btn-remove-experience:hover:not(:disabled) {
  background: #ffccc7;
  color: #f5222d;
}

.btn-remove-experience:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.experience-fields {
  gap: 16px;
}

.experience-fields .info-item {
  gap: 6px;
}

.btn-add-experience {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  justify-content: center;
}

.btn-add-experience:hover {
  background: #e0e0e0;
  color: #333;
}

/* 头像上传 */
.avatar-upload-section {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 32px;
}

.avatar-upload-section h4 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.avatar-upload-container {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.avatar-preview {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.avatar-placeholder i {
  font-size: 48px;
}

.avatar-upload-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 300px;
}

.upload-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.avatar-input {
  display: none;
}

.upload-label {
  cursor: pointer;
}

.file-name {
  color: #333;
  font-size: 14px;
  flex: 1;
  min-width: 200px;
  word-break: break-all;
}

.btn-remove-avatar {
  background: #f5222d;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-avatar:hover {
  background: #ff4d4f;
}

.avatar-tips {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.avatar-tips p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.avatar-tips p:last-child {
  margin-bottom: 0;
}

/* 账号安全 */
.security-section {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
}

.security-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .info-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .avatar-upload-container {
    flex-direction: column;
    align-items: center;
  }
  
  .avatar-upload-controls {
    text-align: center;
  }
  
  .upload-input-group {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .module-card {
    padding: 20px;
    margin: 16px;
  }
  
  .module-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .header-actions {
    align-self: stretch;
    justify-content: flex-end;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .skill-input-group {
    flex-direction: column;
  }
  
  .skill-input-group .form-input,
  .skill-input-group .form-select,
  .btn-add-skill {
    width: 100%;
  }
  
  .experience-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .security-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .module-header h3 {
    font-size: 20px;
  }
  
  .info-section h4 {
    font-size: 16px;
  }
  
  .avatar-preview {
    width: 120px;
    height: 120px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .editing-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-section,
.avatar-upload-section {
  animation: fadeIn 0.3s ease-out;
}

/* 滚动条样式 */
.module-card::-webkit-scrollbar {
  width: 6px;
}

.module-card::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.module-card::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.module-card::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>